<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./elementui/vue.min.js"></script>
    <link rel="stylesheet" href="./elementui/index.css">
    <script src="./elementui/index.js"></script>
    <!--    <script src="./node_modules/downloadjs/download.min.js"></script>-->

</head>
<body>
<div id="app">

    <div class="index">
        <el-container>
            <el-table
                    :data="tableData"
                    id="taskTable"
                    style="width: 100%">
                <el-table-column v-for="(item) in tableColumnData"
                                 :prop="item.prop"
                                 :label="item.label"
                                 sortable
                                 width="180">
                </el-table-column>

            </el-table>
        </el-container>

        <div>
            <img src="http://192.168.221.118:8080/ACTIVITYPlatform_war_exploded/do/DownloadAndOpen/videoOrImagePlay?name=7FzrRgpFIuRky3S1tNQcHX5F.png" width="200px" height="200"/>
        </div>


    </div>


</div>

<script type="module">
    // import  json from "vue-json-excel"
    import JsonExcel from './node_modules/vue-json-excel/dist/vue-json-excel.esm.js'

    Vue.component('download-excel', JsonExcel);

    new Vue({
        el: "#app",
        data() {
            return {
                excelpage: [],
                /*json_fields: {
                    "日期1": "date",
                    "名字": "name",
                    "地址": "address",
                    "排序": "sort"
                },
*/
                json_fields: {
                    "日期1": "date",
                    "名字": "name",
                    "地址": "address",
                    "排序": {
                        field: "sort",
                        type: "string",
                        callback: (value) => {
                            return "" + value;
                        },
                    },
                },
                tableColumnData: [
                    {label: "日期", prop: "date"},
                    {label: "名字", prop: "name"},
                    {label: "地址", prop: "address"}
                ],
                tableData:
                    [{
                        date: '2016-05-02',
                        name: '1王小虎',
                        address: '上海市普陀区金沙江路 1518 弄',
                        sort: '002'
                    }, {
                        date: '2016-05-04',
                        name: '2王小虎',
                        address: '上海市普陀区金沙江路 1517 弄',
                        sort: '007'

                    }, {
                        date: '2016-05-01',
                        name: '3王小虎',
                        address: '上海市普陀区金沙江路 1519 弄',
                        sort: '001'
                    }, {
                        date: '2016-05-03',
                        name: '4王小虎',
                        address: '上海市普陀区金沙江路 1516 弄',
                        sort: '002'
                    }]
            }
        },
        methods: {
            me() {
                console.log(JsonExcel)
            }
        }
    })
</script>
</body>
</html>
